<template>
  <div class="type-nav">
    <div class="container">     
      <!-- 标题 -->
      <div @mouseleave="leaveShow" @mouseenter="enterShow">
        <h2 class="all">全部商品分类</h2>
        <transition name="sorst">
          <!-- 左 侧边栏 -->
          <div class="sort" v-show="swsn">
            <div class="all-sort-list2" @click="goSearch">
              <!-- -------------------------------------------------- -->
              <div class="item" v-for="(value) in categoryList.data" :key="value.categoryId">            
                <!-- 一级 小标题 -->            
                <h3><a :data-categoryName="value.categoryName" :data-categoryId1="value.categoryId">{{value.categoryName}}</a></h3>
                
                <div class="item-list clearfix">    
                  <div class="subitem">
                    
                    <dl class="fore" v-for="(value2) in value.categoryChild" :key="value2.categoryId">
                      <!-- 二级 小标题 -->
                      <dt><a :data-categoryName="value.categoryName" :data-categoryId2="value2.categoryId">{{value2.categoryName}}</a></dt>
                      <dd>
                        <em v-for="(value3) in value2.categoryChild" :key="value3.categoryId">
                          <!-- 二级 内容 -->
                          <a :data-categoryName="value.categoryName" :data-categoryId3="value3.categoryId">{{value3.categoryName}}</a>
                        </em>                    
                      </dd>                 
                    </dl>            

                  </div>  
                </div>
              </div>
            <!-- -------------------------------------------------- -->
            </div>
          </div>
        </transition>
          
      </div>  
          
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>          

    </div>
  </div>
</template>

<script>

import {mapGetters, mapState, mapMutations, mapActions} from "vuex";
export default {
  name: "TypeNav",
  data() {
    return {
      swsn: true,
    }
  },
  computed: {
    ...mapState({
      categoryList: (state) => {
        if(state.home.categoryList) {
          state.home.categoryList.data = state.home.categoryList.data.splice(0, 17);
          return state.home.categoryList;
        }else {
          return [];
        }        
      },
    }),    
  },
  mounted() {
    if(this.$route.path != "/Home") {
      this.swsn = false;
    }
  },
  methods: {    
    goSearch(event) {
      let {categoryname, categoryid1, categoryid2, categoryid3} = event.target.dataset;
      // 整理参数
      if(categoryname) {
        let location = {name: "search"};
        let query = {categoryName: categoryname};
        if(categoryid1) {
          query.category1Id = categoryid1;          
        }else if(categoryid2) {
          query.category2Id = categoryid2;
        }else if(categoryid3) {
          query.category3Id = categoryid3;
        }

        location.query = query;

        // 跳转
        if(this.$route.params) { location.params = this.$route.params; }        

        this.$router.push(location);
      }      
    }, 

    leaveShow() {
      if(this.$route.path != "/Home") {
        this.swsn = false;
      }      
    },
    enterShow() {
      this.swsn = true;
    },
  },
}
</script>

<style scoped>
  .type-nav {
    border-bottom: 2px solid #e1251b;
  }
  .type-nav .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
  }
  .type-nav .container .all {
    width: 210px;
    height: 45px;
    background-color: #e1251b;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
  .type-nav .container .all a {
    height: 45px;
    margin: 0 22px;
    line-height: 45px;
    font-size: 16px;
    /* color: #333; */
  }
  .type-nav .container .nav a {
    height: 45px;
    margin: 0 22px;
    line-height: 45px;
    font-size: 16px;
    /* color: #333;       */
    font-size: 16px;
  }


  /* 左边栏 */
  .type-nav .container .sort {
    position: absolute;
    left: 0;
    top: 47px;
    width: 210px;
    height: 461px;
    position: absolute;
    background: #fafafa;
    z-index: 999;
  }
  .type-nav .container .all-sort-list2 .item h3 {
    line-height: 28px;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    padding: 0 20px;
    margin: 0;
  }
  .type-nav .container .all-sort-list2 .item a {
    color: #333;
    text-decoration: none;
  }
  .type-nav .container .all-sort-list2 .item h3 .cur {
    background: skyblue;
  }
  .type-nav .container .all-sort-list2 .item h3:hover{
    background-color: rgb(180, 180, 180);
  }
  .type-nav .container .all-sort-list2 .item:hover .item-list {
    display: block;
  } 


  /* 隐藏 左边栏侧边框 */
  .type-nav .container .all-sort-list2 .item .item-list {
    display: none;
    position: absolute;
    width: 734px;
    min-height: 460px;
    background: #f7f7f7;
    left: 210px;
    border: 1px solid #ddd;
    top: 0;
    z-index: 9999 !important;

    font-size: 13px;
  }

  .type-nav .container .all-sort-list2 .item .subitem {
    float: left;
    width: 650px;
    padding: 0 4px 0 8px;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl {
    border-top: 1px solid #eee;
    padding: 5.8px 0;
    overflow: hidden;
    zoom: 1;
  }
  .type-nav .container .all-sort-list2 .item .subitem .fore {
    border-top: 0;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl dt {
    float: left;
    width: 54px;
    line-height: 22px;
    text-align: right;
    padding: 3px 6px 0 0;
    font-weight: 700;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl dd {
    float: left;
    width: 415px;
    padding: 3px 0 0;
    overflow: hidden;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl dd em {
    float: left;
    height: 14px;
    line-height: 14px;
    padding: 0 8px;
    margin-top: 5px;
    border-left: 1px solid #ccc;
    
    font-weight: 500;
  }
  
  /* vue过渡 */
  /* 开始 */
  .type-nav .container .sorst-enter {
    height: 0px;
  }
  /* 结束 */
  .type-nav .container .sorst-enter-to {
    height: 461px;
  }
  /* 设置 */
  .type-nav .container .sorst-enter-active {
    transition: all 0.4s linear;
    overflow: hidden;
  }
</style>